<template>
    <div>
        <el-row>


        </el-row>
        <el-dialog title="分配菜单" :visible.sync="dialogVisibleMenu" width="30%">

            <el-tree :data="menuTreeList" show-checkbox default-expand-all node-key="id" ref="name"
                :default-checked-keys="menuIds" :current-node-key="updateMenuIds" highlight-current :props="defaultProps" @check-change="handleCheckChange" >
            </el-tree>
            <div style="margin-top: 20px" align="center">
                <el-button type="primary" @click="handleSaveMenu()">保存</el-button>
                <el-button @click="handleClearMenu()">清空</el-button>
                <el-button @click="dialogVisibleMenu = false">取消</el-button>
            </div>
        </el-dialog>
        


        <el-row>
            <el-col :span="24">
                <!-- 放表格数据 -->
                <el-table :data="tableData" @row-click="singleElection" style="width: 100%">
                    <el-table-column label="" width="65">
                        <template slot-scope="scope">
                            <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="Id" width="180">
                    </el-table-column>
                    <el-table-column prop="wkAccout" label="用户名称" width="180">
                    </el-table-column>

                    <el-table-column prop="ptDepName" label="部门名称">
                    </el-table-column>

                    <el-table-column label="操作">

                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-share"
                                @click="update(scope.row.id)">修改权限</el-button>

                        </template>
                    </el-table-column>
                </el-table>


            </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :page-sizes="[4, 10, 20, 50]" :page-size="pageSize" :current-page="pageNum"
                    @next-click="nextPage" @prev-click="prevPage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" layout=" total,sizes,prev, pager, next" :total="total">
                </el-pagination>
            </el-col>

        </el-row>
    
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageNum: "1",
            pageSize: "4",
            total: 0,
            //菜单相关
            dialogVisibleMenu: false,
            menuTreeList: [],
            defaultProps: {
                children: 'childMenu',
                label: 'name'
            },
            roleId: null,
            id: "",
            updateMenuIds:[],
            checkedKeys:[],




            tableData: [],
            templateSelection: "",
            menuIdList: [],
            menuIds: [],
            aab: [1, 2],
            tRoleMenu:{
            

            }

        }

    },
    methods: {
        prevPage(val) {
            this.pageNum = val;
            this.queryRider();
        },
        nextPage(val) {
            //点击下一页触发

            this.pageNum = val;
            this.queryRider();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryRider();
        },
        handleSizeChange(val) {
            //改变每页条数触发
            this.pageNum = 1;
            this.pageSize = val;
            this.queryRider();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.queryRider();


        },
        handleClearMenu(){
            this.menuIds = [];
            this.updateMenuIds = [];
        },
        
        handleSaveMenu(){
            this.tRoleMenu.id=this.id
            this.tRoleMenu.checkedKeys = this.$refs.name.getCheckedKeys(); 
            //this.bredel();
            //this.add();
         
            this.$axios.post('api/permission/update',this.tRoleMenu)
            .then(res=>{
                this.$message.success("修改成功")
                this.dialogVisibleMenu = false;
                
            
                
                

            })
        },
      
        bredel(){
           
            this.$axios.get('api/permission/balDel/'+this.id)
            .then(res=>{
                
            })
            


        },

        update(id) {
          
            this.id = id;
           
            let param = {}
            param.id = id;
            this.$axios.post('api/permission/updateManage', param)
                .then(res => {

                    this.menuIdList = res.data.data
                    
                    this.menuIdList.forEach(menuItem => {
                        // 假设每个 menuItem 对象都有一个 menuId 属性  
                        this.menuIds.push(menuItem.menuId);
                       
                    });
                    this.updateCheckedKeys(this.menuIds);
                   


                })
     
                this.dialogVisibleMenu = true;
                

        },
        updateCheckedKeys(menuIds) {
            this.menuIds = [];

            this.$nextTick(() => {
                this.$refs.name.setCheckedKeys(menuIds);
            });
        },



        queryAll() {
            this.$axios.post('api/permission/queryAll').then(res => {
                this.menuTreeList = res.data.data


            })
        },



        //带分页参数，查询订单，
        queryRider() {
            let pageParam = {}
            pageParam.pageNum = this.pageNum
            pageParam.pageSize = this.pageSize
            pageParam.param = this.riderParam
            this.$axios.post('api/permission/queryAllByDepId', pageParam)
                .then(res => {
                    if (res.data.code == 200) {

                        //给分页参数赋值
                        this.pageNum = res.data.data.pageNum
                        this.pageSize = res.data.data.pageSize
                        this.total = res.data.data.total
                        this.tableData = res.data.data.list
                    }

                })
        }
    },


    created() {
        this.queryCondition()
        this.queryAll()
    }
}

</script>

<style scoped></style>